<template>
  <div class="csg-input-box">
    <!-- 输入框 -->
    <input
      class="csg-input"
      :class="{
        smallSize: size == 'small',
        mediumSize: size == 'medium',
        largeSize: size == 'large',
        roundType: round,
        searchType: searchIcon != '',
      }"
      :type="internalType"
      :placeholder="placeholder"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
      @keydown="handelKeydown($event)"
    />

    <!-- 前缀图标（定位在 input 内部左侧） -->
    <span
      v-if="searchIcon"
      class="csg-input-inner-icon iconfont"
      :class="searchIcon"
    ></span>

    <!-- 清除按钮 -->
    <div class="csg-clear-btn" v-if="showClear" @click.stop="handleClear">
      <span class="iconfont icon-close"></span>
    </div>

    <!-- 密码显示和隐藏按钮 -->
    <div class="csg-eye-btn" v-if="!showClear" @click.stop="handleEye">
      <span
        v-if="internalType == 'password'"
        class="iconfont  icon-yanjing"
      ></span>
      <span
        v-if="internalType == 'text'"
        class="iconfont icon-biyanjing"
      ></span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入内容',
  },
  round: {
    type: Boolean,
    default: false,
  },
  searchIcon: {
    type: String,
    default: '',
  },
  clearable: {
    type: Boolean,
    default: true, // 是否可清除
  },
  modelValue: {
    type: [String, Number],
    default: '',
  },
  size: {
    type: String,
    default: 'medium',
    validator: (val) => {
      return val ? ['small', 'medium', 'large'].includes(val) : true;
    },
  },
  type: {
    type: String,
    default: 'text',
    validator: (val) => {
      return val
        ? ['text', 'password', 'textarea', 'number'].includes(val)
        : true;
    },
  },
});

const emit = defineEmits(['update:modelValue', 'change', 'update:type']);

const handleClear = () => {
  emit('update:modelValue', '');
};

const handelKeydown = (e: KeyboardEvent) => {
  if (e.key === 'Enter') {
    emit('change', e.target.value);
  }
};

const internalType = ref(props.type);
const showClear = ref(false);
watch(
  () => props.type,
  (n) => {
    if (n == 'password') {
      showClear.value = false;
    } else {
      showClear.value = true;
    }
    internalType.value = n;
  },
  { immediate: true, deep: true }
);
const handleEye = () => {
  internalType.value = internalType.value === 'password' ? 'text' : 'password';
};
</script>
<style lang="scss" scoped>
.csg-input-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 2px;
}

// 输入框样式
.csg-input {
  flex: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  outline: none;
  border: 1px solid #ccc;
  font-size: inherit;
  padding: 12px 12px 12px 12px; // 左边给图标留空间，右边给清除按钮留空间
  position: relative;
  z-index: 1;
}
.searchType {
  padding: 12px 40px 12px 36px;
}

.roundType {
  border-radius: 10px;
}

// 图标定位在 input 内部左侧
.csg-input-inner-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  z-index: 2;
  pointer-events: none; // 点击时不会影响输入框聚焦
}

// 清除按钮定位在 input 内部右侧
.csg-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
  transition: color 0.2s ease;
  z-index: 2;

  &:hover {
    color: #666;
  }
}

.csg-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 2;
}
</style>
